<template>
	<view class="home" :class="{'light-theme': activeTab !== 0}">
		<view class="content">
			<home v-if="activeTab === 0"></home>
			<ticket v-if="activeTab === 1"></ticket>
			<message v-if="activeTab === 3"></message>
			<profile v-if="activeTab === 4"></profile>
		</view>
		<view class="tab" :class="{'light-theme': activeTab !== 0}">
			<view class="tab-item" :class="{'active':activeTab===0}" @tap="activeTab=0">
				闲逛
			</view>
			<view class="tab-item" :class="{'active':activeTab===1}" @tap="activeTab=1">
				购票
			</view>
			<view class="tab-item" :class="{'active':activeTab===2}" @tap="activeTab=2">
				<view class="plus">
					<uv-icon :name="'plus'" :color="activeTab === 0 ? '#fff' : '#333'" size="14"></uv-icon>
				</view>
			</view>
			<view class="tab-item" :class="{'active':activeTab===3}" @tap="activeTab=3">
				消息
			</view>
			<view class="tab-item" :class="{'active':activeTab===4}" @tap="activeTab=4">
				我的
			</view>
		</view>
	</view>
</template>

<script>
	import home from '../../_components/home.vue'
	import ticket from '../../_components/ticket/ticket.vue'
	import message from '../../_components/message.vue'
	import profile from '../../_components/profile.vue'
	
	export default {
		data() {
			return {
				activeTab: 0
			}
		},
		components: {
			home,
			ticket,
			message,
			profile
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	uni-page-body {
		height: 100%;
		width: 100%;
	}

	.home {
		flex-direction: column;
		display: flex;
		position: relative;
		background-color: #000;
		height: 100vh;
		width: 100%;
		color: #fff;
		
		&.light-theme {
			background-color: #f5f5f5;
			color: #333;
		}
	}

	.content {
		flex: 1;
		height: 0;
		width: 100%;
		overflow: hidden; /* 防止内容溢出 */
	}

	.tab {
		box-sizing: border-box;
		padding: 30rpx;
		align-items: center;
		color: #fff;
		display: flex;
		width: 100%;
		background-color: #000;
		z-index: 100; /* 确保底部导航栏在最上层 */
		position: relative; /* 确保z-index生效 */
		
		&.light-theme {
			background-color: #fff;
			color: #333;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		.tab-item.active {
			color: #fff;
			
			.light-theme & {
				color: #333;
			}
		}

		.tab-item {
			color: #999;
			text-align: center;
			flex: 1;

			&.active {
				color: #fff;
				
				.light-theme & {
					color: #333;
				}
			}
			
			.plus {
				display: inline-block;
				border-radius: 10rpx;
				border: #fff 1rpx solid;
				padding: 8rpx 18rpx;
				
				.light-theme & {
					border: #333 1rpx solid;
				}
			}
		}
	}
</style>